<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>某药品库存数据</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>

<!--药品编号-->
<input hidden="hidden" type="number" name="id" id="medicineId" th:value="${medicineId}">

<!--数据表格-->
<div class="layui-margin-3 layui-anim layui-anim-upbit">
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>

<!--表格内容右端操作按钮-->
<script type="text/html" id="toolDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-bg-blue layui-btn-xs" lay-event="output">出库</a>
    </div>
</script>

<script src="/layui/layui.js"></script>
<script>
    layui.use(['table', 'layer', 'jquery'], function () {
        let table = layui.table;
        let layer = layui.layer;
        let $ = layui.jquery;

        // 创建渲染实例
        table.render({
            elem: '#test',
            url: '/getStockData/' + $('#medicineId').val(),
            totalRow: true, // 开启合计行
            page: true,
            cols: [
                [
                    {field: 'id', title: 'ID', align: 'center', hide: true},
                    {field: 'medicineId', title: '药品编号', align: 'center', hide: true},
                    {field: 'birthday', title: '生产日期', sort: true, align: 'center'},
                    {field: 'price', title: '药品单价', sort: true, align: 'center'},
                    {
                        field: 'count',
                        title: '库存数量',
                        sort: true,
                        align: 'center',
                        templet: '<div><span class="layui-badge">{{= d.count }}</span></div>',
                        totalRow: '<span class="layui-badge layui-bg-orange">总计：{{= d.TOTAL_NUMS }}</span>'
                    },
                    {fixed: 'right', title: '相关操作', templet: '#toolDemo', align: 'center'}
                ]
            ],
            error: function (res, msg) {
                console.log(res, msg)
            }
        });

        // 触发单元格工具事件
        table.on('tool(test)', function (obj) {
            let data = obj.data; // 获得当前行数据
            if (obj.event === 'output') {
                layer.open({
                    type: 2,
                    title: '填写药品出库信息',
                    area: ['500px', '400px'],
                    scrollbar: false,
                    content: ['/toStockOutput/' + data.id + '/' + data.count, 'no'],
                    end: function () {
                        table.reload(obj.config.id);
                    }
                });
            }
        });
    });
</script>
</body>
</html>